<template>
  <view class="container">
    <hello-title></hello-title>
    <view class="page-title">最新步数</view>
    <view class="step-main-card">
      <view class="circle-card">
        <view class="content">
          <view class="target">
            <text class="text">{{percent}}%</text>
          </view>
          <circle-progress-bar :percent="percent" :width="210" :height="210" :line-width="10" v-if="percent!=null"></circle-progress-bar>
        </view>
      </view>
      <view class="detail">
        <view class="detail__row">
          <text class="detail__row--hint">步数</text>
          <text class="detail__row--big">{{todayStep}}</text>
        </view>
        <view class="detail__row">
          <text class="detail__row--hint">距离完成</text>
          <text class="detail__row--normal">{{targetStep-todayStep}}</text>
        </view>
        <view class="detail__row">
          <text class="detail__row--hint">目标步数</text>
          <text class="detail__row--normal">{{targetStep}}</text>
        </view>
      </view>
    </view>
    <!-- 图表卡片   -->
    <view class="line-card">
      <view class="line-card__tabs">
        <view class="line-card__tab" @tap="showStepsWeekChart"
              :class="{'line-card__tab--active':stepsChartDateType===1}">
          每周
        </view>
        <view class="line-card__tab" @tap="showStepsMonthChart"
              :class="{'line-card__tab--active':stepsChartDateType===2}">
          每月
        </view>
      </view>
      <!--  注意:因为 canvas 不能重绘的原因,无法使用 v-if    -->
      <view class="line-card__content" :class="{'line-card__content--hidden':stepsChartDateType!==1}">
        <line-chart :config="stepsWeekChartConfig" v-if="stepsWeekChartConfig" id="weekly-chart"></line-chart>
      </view>
      <view class="line-card__content" :class="{'line-card__content--hidden':stepsChartDateType!==2}">
        <line-chart :config="stepsMonthChartConfig" v-if="stepsMonthChartConfig" id="monthly-chart"></line-chart>
      </view>
    </view>

    <view class="page-title page-title--no-padding">更多步数数据</view>
    <view class="data-card-area">
      <view class="data-card data-card--orange">
        <view class="data-card__head">
          <text>消耗卡路里</text>
          <view class="data-card__icon data-card__icon--fire"></view>
        </view>
        <view class="data-card__content">
          <text>{{ Math.floor(todayStep*0.75*47/1000) }}</text>
          <text class="unit">Kal</text>
        </view>
      </view>
      <view style="width:30px"></view>
      <view class="data-card data-card--purple">
        <view class="data-card__head">
          <text>步行距离</text>
          <view class="data-card__icon data-card__icon--walk"></view>
        </view>
        <view class="data-card__content">
          <text>{{todayStep*0.75}}</text>
          <text class="unit">米</text>
        </view>
      </view>
    </view>
    <view class="line-card__hints">
      <view class="line-card__hint line-card__hint--sunrise">
        消耗卡路里
      </view>
<!--      <view class="line-card__hint line-card__hint&#45;&#45;purple">-->
<!--        步行距离-->
<!--      </view>-->
    </view>
    <view class="line-card">
      <view class="line-card__tabs">
        <view class="line-card__tab" @tap="showCalorieWeekChart"
              :class="{'line-card__tab--active-orange':calorieChartDateType===1}">
          每周
        </view>
        <view class="line-card__tab" @tap="showCalorieMonthChart"
              :class="{'line-card__tab--active-orange':calorieChartDateType===2}">
          每月
        </view>
      </view>
      <!--  注意:因为 canvas 不能重绘的原因,无法使用 v-if    -->
      <view class="line-card__content" :class="{'line-card__content--hidden':calorieChartDateType!==1}">
        <line-chart line-color="#FFAD4D" :config="calorieWeekChartConfig" v-if="calorieWeekChartConfig" id="calorie-weekly-chart"></line-chart>
      </view>
      <view class="line-card__content" :class="{'line-card__content--hidden':calorieChartDateType!==2}">
        <line-chart line-color="#FFAD4D" :config="calorieMonthChartConfig" v-if="calorieMonthChartConfig" id="calorie-monthly-chart"></line-chart>
      </view>
    </view>

    <view class="line-card__hints">
<!--      <view class="line-card__hint line-card__hint&#45;&#45;sunrise">-->
<!--        消耗卡路里-->
<!--      </view>-->
      <view class="line-card__hint line-card__hint--purple">
        步行距离
      </view>
    </view>
    <view class="line-card">
      <view class="line-card__tabs">
        <view class="line-card__tab" @tap="showDistanceWeekChart"
              :class="{'line-card__tab--active':distanceChartDateType===1}">
          每周
        </view>
        <view class="line-card__tab" @tap="showDistanceMonthChart"
              :class="{'line-card__tab--active':distanceChartDateType===2}">
          每月
        </view>
      </view>
      <!--  注意:因为 canvas 不能重绘的原因,无法使用 v-if    -->
      <view class="line-card__content" :class="{'line-card__content--hidden':distanceChartDateType!==1}">
        <line-chart :config="distanceWeekChartConfig" v-if="distanceWeekChartConfig" id="distance-weekly-chart"></line-chart>
      </view>
      <view class="line-card__content" :class="{'line-card__content--hidden':distanceChartDateType!==2}">
        <line-chart :config="distanceMonthChartConfig" v-if="distanceMonthChartConfig" id="distance-monthly-chart"></line-chart>
      </view>
    </view>

  </view>
</template>

<script>
import "./index.less";
import helloTitle from "../../../common-components/hello-title/hello-title";
import CircleProgressBar from "../../../common-components/circle-progress/circle-progress";
import LineChart from "../../../common-components/line-chart/line-chart";
import LineChart2Lines from "../../../common-components/line-chart-2-lines/line-chart-2-lines";
import {getHistoryData,getUserProfileDataToday} from "../../../services/healthy-data-service";
import findIndex from 'lodash.findindex';
import get from 'lodash.get';
export default {
  name: "index",
  components:{
    LineChart,
    CircleProgressBar,
    helloTitle,
  },
  data(){
    return {
      targetStep:10000,
      stepsChartDateType:1,
      calorieChartDateType:1,
      distanceChartDateType:1,
      todayStep:0,
      weight:0,
      todayCalorie:0,
      todayDistance:0,
      stepsWeekChartConfig:null,
      stepsMonthChartConfig:null,
      calorieWeekChartConfig:null,
      distanceWeekChartConfig:null,
      calorieMonthChartConfig:null,
      distanceMonthChartConfig:null,
      percent:null,
    }
  },
  computed:{
  },
  methods:{
    showStepsWeekChart() {
      this.stepsChartDateType = 1;
    },
    showStepsMonthChart() {
      this.stepsChartDateType = 2;
    },
    showCalorieWeekChart() {
      this.calorieChartDateType = 1;
    },
    showCalorieMonthChart() {
      this.calorieChartDateType = 2;
    },
    showDistanceWeekChart() {
      this.distanceChartDateType = 1;
    },
    showDistanceMonthChart() {
      this.distanceChartDateType = 2;
    },
    // 把数据格式化成 ${daysNumber} 天的数据
    formatChartData(data, daysNumber: number,getValueFn:Function,yDisplay) {
      const baseConfig = {
        yAxis: yDisplay?yDisplay:{
          unit: 1,
          base: 50,
          top: 140,
          display: [
            // 必须按顺序
            {value: 100, label: "100"},
            {value: 5000, label: "5K"},
            {value: 10000, label: "10K"},
            {value: 12000, label: "14K"},
          ],
        },
        dataset: [],
      }
      for (let i = 1; i <= daysNumber; i++) {
        const index = findIndex(data, item => item.dayOfWeek === i);
        baseConfig.dataset.push({value: getValueFn(data[index])});
      }
      return baseConfig;
    }
  },
  async created() {
    const calorieYDisplay={
        unit: 1,
        base: 0,
        top: 2000,
        display: [
          {value: 0, label: "50"},
          {value: 500, label: "500"},
          {value: 1500, label: "1500"},
          {value: 2000, label: "2000"},
        ]
      }
    const distanceYDisplay={
      unit: 1,
      base: 0,
      top: 2000,
      display: [
        {value: 0, label: "50"},
        {value: 500, label: "500"},
        {value: 1500, label: "1500"},
        {value: 2000, label: "2000"},
      ]
    }
    const weekResult = await getHistoryData("DAY_OF_WEEK", "STEPS");
    const monthResult = await getHistoryData("DAY_OF_MONTH", "STEPS");
    const lastData = await getUserProfileDataToday();
    console.log("步数,今日数据",lastData);
    this.weight=get(lastData,"data.data.bodyProfile.weight",0);
    this.todayStep = get(lastData,"data.data.bodyProfile.steps.stepCount",0);
    this.todayDistance = get(lastData,"data.data.bodyProfile.steps.distance",0);
    this.todayCalorie = get(lastData,"data.data.bodyProfile.steps.calorie",0);
    this.percent = Math.round((this.todayStep/this.targetStep)*100);
    this.stepsWeekChartConfig = this.formatChartData(weekResult,7,(data)=>get(data,"value.stepCount",0));
    this.stepsMonthChartConfig = this.formatChartData(monthResult,30,(data)=>get(data,"value.stepCount",0));
    this.calorieWeekChartConfig = this.formatChartData(weekResult,7,(data)=>Math.floor(get(data,"value.stepCount",0)*0.75*47/1000),calorieYDisplay);
    this.calorieMonthChartConfig = this.formatChartData(monthResult,30,(data)=>Math.floor(get(data,"value.stepCount",0)*0.75*47/1000),calorieYDisplay);
    this.distanceWeekChartConfig = this.formatChartData(weekResult,7,(data)=>get(data,"value.stepCount",0)*0.75,distanceYDisplay);
    this.distanceMonthChartConfig = this.formatChartData(monthResult,30,(data)=>get(data,"value.stepCount",0)*0.75,distanceYDisplay);
    console.log("step--data");
    console.log(monthResult);
    console.log("step--data");
  }
}
</script>
